<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=1536, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">
    <title>logo-in</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/log-in.css">
</head>

<body>
    <div class="logo">
        <a href="./yunmeng.html"><img src="/网站资源/云梦logo.png"></a>
    </div>
    <div class="bgc">
        <img src="/网站资源/主网站素材/插画/猫娘.png" alt="" class="active">
        <img src="/网站资源/主网站素材/插画/雨窗边.png" alt="">
        <img src="/网站资源/主网站素材/插画/阿离.jpg" alt="">
    </div>
    <section id="login-from">
        <form id="loginForm">
            <h1>welcom</h1>
            <div id="errorMessage" class="error-message"></div>
            <div class="input-warp in1">
                <input type="text" placeholder="用户名/邮件" spellcheck="false" required id="username">
                <i class="fa-solid fa-user"></i>
            </div>

            <div class="input-warp in2">
                <input type="password" placeholder="密码" id="password">
                <i class="fa-solid fa-lock"></i>
            </div>

            <div class="rem">
                <p>
                    <input type="checkbox">
                    记住我?
                </p>
                <a href="#">忘记密码?</a>
            </div>

            <div class="other">
                <p>其他登录方式</p>
                <ul>
                    <li><a href="#"><i class="fa-brands fa-google"></i></a></li>
                    <li><a href="#"><i class="fa-brands fa-facebook"></i></a></li>
                    <li><a href="#"><i class="fa-brands fa-telegram"></i></a></li>
                    <li><a href="#"><i class="fa-brands fa-x-twitter"></i></a></li>
                </ul>
            </div>

            <button type="submit">登录</button>
            <p class="reg">
                没有账户?
                <a href="#">注册账户</a>
            </p>
        </form>
    </section>
</body>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const images = document.querySelectorAll('.bgc img');
        let current = 0;

        // 初始化第一张显示
        images[current].classList.add('active');

        // 设置轮播定时器
        setInterval(() => {
            images[current].classList.remove('active');
            current = (current + 1) % images.length;
            images[current].classList.add('active');
        }, 5000); // 5秒切换一次
    });
    document.addEventListener('DOMContentLoaded', function () {
        const images = document.querySelectorAll('.bgc img');
        let current = 0;

        // 初始化第一张显示
        images[current].classList.add('active');

        // 设置轮播定时器
        setInterval(() => {
            images[current].classList.remove('active');
            current = (current + 1) % images.length;
            images[current].classList.add('active');
        }, 5000); // 5秒切换一次
    });
</script>

</html>